<template>
    <view class="person-info-step-1">
        <div class="step-icon" style="margin-bottom: 16px;">
            <img src="https://hxs.dsjhs.com:553/prod-api/profile//step-1.png" alt="" srcset="" style="width: 358px;height: 21px;">
        </div>
        <text class="text_3">Hi～给自己起一个昵称吧～</text>
        <view class="text-wrapper_1 flex-col">
            <input v-model="form.nickName" type="text" class="text_4" placeholder="请输入的昵称" />
        </view>
        <text class="text_5">我的身高</text>
        <view class="text-wrapper_2 flex-row justify-between">
            <input v-model="form.height" type="number" class="text_4" placeholder="请输入您的身高" />
            <text class="text_7">cm</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        step: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            form: {
                nickName: '',
                height: null
            }
        }
    },
    methods: {
        handleNext() {
            this.$emit('update:step', 2);
        }
    }
}
</script>

<style lang="scss" scoped>
.person-info-step-1 {

    position: relative;
    width: 100%;
    padding: 18px 16px;
    box-sizing: border-box;

    .block_1 {
        margin: 0 27px 0 43px;

        .text_1 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 17px;
            font-family: SFPro-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 22px;
        }

        .thumbnail_1 {
            width: 19px;
            height: 12px;
            margin: 5px 0 5px 182px;
        }

        .thumbnail_2 {
            width: 17px;
            height: 12px;
            margin: 5px 0 5px 8px;
        }

        .image_1 {
            width: 27px;
            height: 13px;
            margin: 5px 0 4px 7px;
        }
    }

    .block_2 {
        margin-top: 6px;

        .label_1 {
            width: 42px;
            height: 46px;
        }

        .text_2 {
            height: 24px;
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 17px;
            font-family: SFProDisplay-Medium;
            font-weight: 500;
            text-align: right;
            white-space: nowrap;
            line-height: 20px;
            margin: 11px 0 0 120px;
        }

        .image_2 {
            width: 87px;
            height: 32px;
            margin: 7px 0 7px 67px;
        }
    }

    .image_3 {
        width: 358px;
        height: 20px;
        margin: 16px 10px 0 16px;
    }

    .text_3 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 25px;
    }

    .text-wrapper_1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 20px;
        margin: 16px 0 32px;


    }

    .text_4 {
        width: 100%;
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        padding: 20px 16px;

    }

    .text_5 {
        display: block;
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 25px;
        margin-bottom: 16px;
    }

    .text-wrapper_2 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 20px;
        width: 100%;
        box-sizing: border-box;

        .text_6 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
        }

        .text_7 {
            padding-right: 12px;
            color: rgba(52, 49, 79, 1);
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 62px;
        }
    }


}
</style>